<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
      <template #typeId="{ row }">
        {{ conversionDisplay(row.typeId, dict["deliverables"]) }}
      </template>
      <template #gmtCreate="{ row }">
        {{ row.gmtCreate }}
      </template>
      <template #projectName="{ row }">
        {{ row.projectName }}
      </template>
      <template #userName="{ row }">
        {{ row.userName }}
      </template>
      <template #uploadByName="{ row }">
        {{ row.uploadByName }}
      </template>

      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link @click="downHandler(scope.row)">下载</el-button>
      </template>
    </ProTable>
  </div>
</template>
<script lang="ts" setup name="reportFile">
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { filesPage } from "@/api/modules/statistics";
import { ref, reactive, getCurrentInstance } from "vue";
import { getParamByParentIdList } from "@/api/modules/sys";
import { Dict } from "@/api/interface";
import { downFilesOpen } from "@/utils";
// import { downloadFile } from "@/api/modules/sys";
// api
import { getProjectPage } from "@/api/modules/project";
import { getListAllUser } from "@/api/modules/sys";

const cxt = getCurrentInstance();
const dict = cxt?.appContext.config.globalProperties.$dict;
let dictList: Dict.ResDictList = reactive({});
const proTable = ref<ProTableInstance>();
// 变量
let projectListParams = ref({
  currentPage: 1,
  pageSize: 1000,
  userId: "",
  searchKey: ""
});
const listAllUser = ref<any>([]);
const getTableList = async (params: any) => {
  const list: string[] = [dict.deliverables];
  dictList = await getDicList({ parentIdList: list.join(",") });
  const startTime = params.timeCustomer[0] || undefined;
  const endTime = params.timeCustomer[1] || undefined;
  const newParams = {
    currentPage: params.pageNum,
    searchKey: params.searchKey ? params.searchKey : "",
    projectId: params.projectId || undefined,
    uploadBy: params.uploadBy || undefined,
    startTime,
    endTime
  };
  return filesPage(newParams);
};

const downHandler = async data => {
  downFilesOpen(data.path, data.originalFileName);
};

// 获取字典数据
const getDicList = async (params: Dict.ResDictList) => {
  const { data } = await getParamByParentIdList(params);
  return data || [];
};
// 转换显示
const conversionDisplay = (id: string, type: string) => {
  const listItem = dictList[type]?.find(item => item.id === id);
  return listItem?.name;
};

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "projectId", label: "项目ID", isShow: false },
  {
    prop: "projectName",
    label: "项目名称",
    search: { el: "select", label: "项目名称", key: "projectId", props: { filterable: true } },
    enum: async () => await getProjectPageFn(),
    fieldNames: { label: "name", value: "id" }
  },
  { prop: "projectCode", label: "项目编号" },
  {
    prop: "uploadByName",
    label: "上传者",
    search: { el: "select", label: "用户名", key: "uploadBy", props: { filterable: true } },
    enum: async () => await getListAllUserFn(),
    fieldNames: { label: "name", value: "id" }
  },
  { prop: "typeId", label: "项目文件类型" },
  { prop: "name", label: "文件名", isShow: false },
  { prop: "path", label: "路径", isShow: false },
  {
    prop: "originalFileName",
    label: "文件原名称",
    search: {
      el: "date-picker",
      label: "创建时间",
      key: "timeCustomer",
      props: { type: "daterange", valueFormat: "YYYY-MM-DD HH:mm:ss", clearable: true },
      defaultValue: []
    }
  },
  // { prop: "downNumber", label: "下载次数" },
  { prop: "customPath", label: "自定义路径", isShow: false },
  { prop: "gmtCreate", label: "创建时间" },
  { prop: "operation", label: "操作", width: 120 }
];

const dataCallback = (data: any) => {
  // 处理字段文字
  return {
    list: data.records,
    total: Number(data.total),
    pageNum: Number(data.current),
    pageSize: Number(data.size)
  };
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
  return Promise.resolve({ data: data });
};
const getProjectPageFn = async () => {
  try {
    const { data } = await getProjectPage(projectListParams.value);
    return {
      data: data.records || []
    };
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
